<!--
* @Author: zhangjing
* @Date: 2025-01-07 13:09:14
* @Description: 血压记录=>
-->
<template>
	<view class="pageview flex flex-direction">
		<view class="top-wrap">
			<tabs @changeTab="changeTab"></tabs>
		</view>
		<view class="main flex-sub">
			<view class="card">
				<timebar :timeType="timeType" @updateData="updateData" ref="timebar"></timebar>
				<bpChart ref="bpChart"></bpChart>
			</view>
			<view class="card count">
				<view class="bpbar">
					<bpStep size="lg"></bpStep>
				</view>
				<view class="flex align-center">
					<view class="flex-sub">
						<view class="w-title grid-text">血压平均值</view>
						<view class="w-num">12</view>
					</view>
					<view class="flex-sub">
						<view class="w-title grid-text">心率平均值</view>
						<view class="w-num">12</view>
					</view>
				</view>
			</view>
			<view class="card count">
				<u-grid :border="true">
					<u-grid-item v-for="(item, index) in bpInfo" :key="index">
						<view class="w-title grid-text">{{ item.text }}</view>
						<view class="w-num">{{ item.num }}次</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<footbar deviceTypeCode="BP2A"></footbar>
	</view>
</template>

<script>
import tabs from '@/components/tabs';
import timebar from '@/components/timebar';
import bpChart from './components/bpChart.vue';
import bpStep from '@/components/bpStep';
import footbar from './components/footbar.vue';
import { mapState } from 'vuex';
import { formatEveryDay } from '@/utils/index.js';
import { addZero } from '@/uni_modules/zxz-uni-datetime-picker/components/zxz-uni-datetime-picker/zxz-util.js';

export default {
	data() {
		return {
			timeType: 'date',
			curIndex: 0,
			bpInfo: [
				{
					value: '',
					num: '12',
					text: '重度'
				},
				{
					value: '',
					num: '12',
					text: '中度'
				},
				{
					value: '',
					num: '12',
					text: '轻度'
				},
				{
					value: '',
					num: '12',
					text: '正常偏高'
				},
				{
					value: '',
					num: '12',
					text: '正常'
				},
				{
					value: '',
					num: '12',
					text: '偏低'
				}
			],
			weightData: []
		};
	},
	components: { tabs, timebar, bpChart, bpStep, footbar },
	computed: {
		...mapState(['curAccount'])
	},
	created() {},
	methods: {
		updateData(timeInfo) {
			let param = {
				startTime: timeInfo.startDay + ' 00:00:00',
				endTime: timeInfo.endDay + ' 23:59:59',
				type: ['date', 'week', 'yearMonth', 'year'].findIndex(item => item == this.timeType)
			};
			this.getBP2ACount(param);
			this.getBP2ACountOfTj(param);
		},
		getBP2ACount(param) {
			this.$postAction(this.$deviceapi.getBP2ACount, {
				detailId: this.curAccount.detailId,
				...param
			}).then(da => {
				this.weightData = da || [];
				this.updateChart();
			});
		},
		getBP2ACountOfTj(param) {
			this.$postAction(this.$deviceapi.getBP2ACountOfTj, {
				detailId: this.curAccount.detailId,
				...param
			}).then(da => {
				this.bpInfo.forEach(item => {
					item.num = da[item.text] || 0;
				});
			});
		},
		updateChart() {
			let categories = [],
				data1 = [],
				data2 = [];
			if (this.timeType == 'date') {
				for (var i = 0; i < 24; i++) {
					categories.push(addZero(i) + ':00');
				}
			} else if (this.timeType == 'year') {
				for (var i = 0; i < 12; i++) {
					categories.push(this.$refs.timebar.yearWeek + '-' + addZero(i + 1));
				}
			} else {
				let list = formatEveryDay(this.$refs.timebar.startDay, this.$refs.timebar.endDay);
				categories = [...list];
			}
			console.log('categories', categories);
			if (this.weightData && this.weightData.length > 0) {
				this.weightData.forEach(item => {
					data1.push(item.systolic_pressure || null);
					data2.push(item.diastolic_pressure || null);
				});
			}
			this.$refs.bpChart.getServerData(
				categories,
				[
					{
						name: '收缩压',
						connectNulls: true,
						data: data1
					},
					{
						name: '舒张压',
						connectNulls: true,
						data: data2
					}
				],
				this.timeType == 'date' ? '' : this.timeType == 'year' ? 'xAxissemester' : 'xAxisDay',
				this.timeType == 'date' ? 5 : this.timeType == 'year' ? 6 : 8
			);
		},
		changeWeightTab(index) {
			if (this.curIndex != index) {
				this.curIndex = index;
				this.updateChart();
			}
		},
		changeTab(info) {
			this.timeType = info.value;
		}
	}
};
</script>
<style lang="scss" scoped>
@import 'pro.scss';
</style>
